<template>
  <el-form-item :label="props.label" :prop="props.prop">
    <el-button @click="dialogVisible = true">{{
      selectedUser && selectedUser.nickname ? selectedUser.nickname : '请选择' + props.label
    }}</el-button>
  </el-form-item>
  <Dialog :title="'搜选' + props.label" v-model="dialogVisible">
    <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        ref="queryFormRef"
        :inline="true"
        :model="queryParams"
        class="-mb-15px"
        label-width="68px"
      >
        <el-form-item label="昵称" prop="nickname">
          <el-input
            v-model="queryParams.nickname"
            class="!w-180px"
            clearable
            placeholder="请输入昵称关键词"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="queryParams.mobile"
            class="!w-220px"
            clearable
            placeholder="请输入手机尾号"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <Icon class="mr-5px" icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <Icon class="mr-5px" icon="ep:refresh" />
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        :data="list"
        :show-overflow-tooltip="true"
        :stripe="true"
        empty-text="请先输入昵称关键词或手机尾号搜索"
        @row-click="handleRowClick"
      >
        <el-table-column label="#" width="55">
          <template #default="{ row }">
            <el-radio :label="row.id" v-model="selectedUserId" @change="handleSelectionChange(row)">
              <!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
              &nbsp;
            </el-radio>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="编号" prop="id" width="100px" /> -->
        <el-table-column align="center" label="手机号" prop="mobile" min-width="120px" />
        <el-table-column align="center" label="昵称" prop="nickname" min-width="180px" />
        <el-table-column align="center" label="头像" prop="avatar" width="80px">
          <template #default="scope">
            <img
              :src="scope.row.avatar"
              class="w-40px border border-solid border-gray-50"
              alt="[图]"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态" prop="status" width="100px">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
          </template>
        </el-table-column>
      </el-table>
    </ContentWrap>
  </Dialog>
</template>
<script lang="ts" setup>
import { getUserListForPick, UserVO } from '@/api/member/user'
import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE } from '@/utils/dict'

defineOptions({ name: 'MemberUserPicker' })

const props = defineProps({
  label: propTypes.string.def('后台用户'),
  id: propTypes.number.def(0),
  name: propTypes.string.def(''),
  prop: propTypes.string.def('userId')
})

const emit = defineEmits(['picked'])

const loading = ref(true)
const list = ref<UserVO[]>([])
const dialogVisible = ref(false)
const selectedUserId = ref<number | string>()
const selectedUser = ref<any>()
const queryParams = reactive<any>({
  nickname: undefined,
  mobile: undefined
})
const queryFormRef = ref() // 搜索的表单

/** 搜索按钮操作 */
const handleQuery = () => {
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  queryParams.value = {
    nickname: undefined,
    mobile: undefined
  }
  handleQuery()
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await getUserListForPick(queryParams)
    list.value = data
  } finally {
    loading.value = false
  }
}

/** 行点击事件 */
const handleRowClick = (row: UserVO) => {
  handleSelectionChange(row)
}

/** 表格选中事件 */
const handleSelectionChange = (row: UserVO) => {
  selectedUserId.value = row.id
  selectedUser.value = row
  handleEmitChange()
}

/** 弹窗确认事件 */
const handleEmitChange = () => {
  dialogVisible.value = false
  emit('picked', selectedUserId.value, selectedUser.value)
}

onMounted(async () => {
  await getList()
})

watch(
  () => props.id,
  (id: number | string) => {
    selectedUserId.value = id
    selectedUser.value.id = id
  }
)
watch(
  () => props.name,
  (name: string) => {
    selectedUser.value.nickname = name
  }
)
</script>
